
window.onload = function () {
    var myBtn = document.getElementById("myBtn")
    myBtn.addEventListener('click',onClickBtn,false); //最后一个参数表示是否发生在捕获阶段 默认是false
    //myBtn.addEventListener('click',clickBtn1); //最后一个参数表示是否发生在捕获阶段

    function onClickBtn(evt) {
        //alert('第一次执行onClickBtn evt.eventPhase='+evt.eventPhase);//在目标阶段执行 其实也是冒泡阶段的开始 但是还是2 
        //evt.stopImmediatePropagation();//停止事件冒泡后续节点不会侦听到事件冒泡，并且当前节点的其他监听函数也不会侦听到(添加的先后顺序)
        //evt.stopPropagation();//停止事件冒泡后续节点不会侦听到事件冒泡，但是当前节点的其他监听函数可以侦听到(添加的先后顺序)
        console.log('onClickBtn',evt.target,evt.currentTarget);
        console.log('evt.clientX evt.clientY',evt.clientX,evt.clientY); //获取鼠标的位置 类似as3事件的stageX stageY
        console.log('evt.pageX,evt.pageY',evt.pageX,evt.pageY); //在页面没有滚动的情况下 pageX 和pageY 的值与clientX 和clientY 的值相等。
        console.log('evt.screenX,evt.screenY',evt.screenX,evt.screenY); //获取鼠标相对于显示器左上角的坐标
        console.log('evt.offsetX,evt.offsetY',evt.offsetX,evt.offsetY); //元素左上角的坐标类似as3的localX localY
        //键状态 ：shiftKey、ctrlKey、altKey 和metaKey(win键)
      
        if(evt.ctrlKey)
        {
            alert("你按下了ctrl键来点击我干嘛?");
        }
    }

    function clickBtn1(params) {
        alert("clickBtn1 第二次执行")
    }

    var myDiv = document.getElementById("panel");
    myDiv.addEventListener('click',onClickDiv);
    function onClickDiv(evt) {
        console.log('onClickDiv',evt.target,evt.currentTarget);
    }

    document.body.addEventListener('click',onClickBody1);
    document.body.addEventListener('click',onClickBody2,true); //这个侦听最后一个参数设置为true表示在捕获阶段就侦听事件
   
    function onClickBody1(evt) {
        //alert('onClickBody1 evt.eventPhase='+evt.eventPhase);// 3 冒泡阶段 由于在btn已经停止事件冒泡了 所有这里不会捕获
        console.log('onClickBody1',evt.target,evt.currentTarget);
    }
    function onClickBody2(evt) {
        //alert('onClickBody2 evt.eventPhase='+evt.eventPhase);// 1 捕获阶段执行
        console.log('onClickBody2',evt.target,evt.currentTarget);
    }
    //给哪个元素添加侦听函数 currentTarget 就是指向哪个元素也是当前派发事件的元素
    //target总是最深层次的那个触发事件的元素(也就是事件的目标) 事件捕获结束于目标 事件冒泡开始于目标

    //-------------事件类型-----------
    var isSupported = document.implementation.hasFeature("HTMLEvents", "2.0"); //判断浏览器是否支持DOM2级事件
    console.log('isSupported',isSupported);
    window.addEventListener('resize',onResize);

    function onResize(evt) {
        console.log("---onResize---",document.documentElement.clientWidth)
    }

    //焦点事件 两个重要事件所有浏览器都支持的事件 获得焦点 focus 失去焦点 blur 这两个事件不冒泡
    //鼠标事件的 relatedTarget 属性 相关元素 该属性只有 mouseover 和 mouseout 事件有 其他是null
    myDiv.addEventListener('mouseover',onMouseOver)
    
    function onMouseOver(evt) {
        console.log('evt.relatedTarget=',evt.relatedTarget,evt.button); //如果从body把鼠标移到div内 所以 relatedTarget 是body 如果是从其他元素移入就是其他元素
    }
    //2017年12月27日18:33:14 p373

    //鼠标滚轮事件 支持冒泡
    document.addEventListener('mousewheel',onMouseWheel);
    function onMouseWheel(event) {
        console.log('event.wheelDelta=',event.wheelDelta);//向上滚动是正数向下是负数
    }

    // ---------------- 键盘和文本事件 ---------------
    //用户按下键盘触发的三个事件顺序 keydown keypress keyup
    //用户按下一个键不释放的话 会一直触发 keydown 和 keypress 
    document.addEventListener('keydown',onKeyDown);
    document.addEventListener('keypress',onKeyPress);
    
    function onKeyDown(keyEvent) { //KeyboardEvent
        
        var char = String.fromCharCode(keyEvent.keyCode); //如果按下的是字母键 则是大写字母的code
        console.log('onKeyDown keyEvent.keyCode',keyEvent.keyCode,keyEvent.charCode,char)
    }

    function onKeyPress(keyEvent) {
        //在ie和chrome下测试发现按下非字母和数字键时 不触发该事件  其他浏览器的话没有试过
        var char = String.fromCharCode(keyEvent.keyCode); //如果按下的是字母键 则是小写字母的code
        console.log('onKeyPress keyEvent.keyCode',keyEvent.keyCode,char);
        
       
    }

    //textInput事件 其他事件名基本都是小写 这个事件名是驼峰式
    var myTxt = document.getElementById("myTxt");
    myTxt.addEventListener('textInput',onInputText);
    function onInputText(event) { // TextEvent
        console.log('onInputText',event.data,event.inputMethod); //用户每次新输入的内容，并非之前输入过的全部内容
    }
    /*
        TextEvent实例的 inputMethod 属性的值枚举 只有ie支持s
         0，表示浏览器不确定是怎么输入的。
         1，表示是使用键盘输入的。
         2，表示文本是粘贴进来的。
         3，表示文本是拖放进来的。
         4，表示文本是使用IME 输入的。
         5，表示文本是通过在表单中选择某一项输入的。
         6，表示文本是通过手写输入的（比如使用手写笔）。
         7，表示文本是通过语音输入的。
         8，表示文本是通过几种方法组合输入的。
         9，表示文本是通过脚本输入的。
    */

};

